// 创建并设置canvas元素
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 设置canvas样式，确保它是页面的背景，并且在最上层
canvas.style.position = 'fixed';  // 固定位置，不随滚动条滚动
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.zIndex = '9999';  // 设置canvas在页面最上层
canvas.style.pointerEvents = 'none';  // 禁止canvas与鼠标事件冲突

// 设置canvas画布的宽高为浏览器视口宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 使用2d的绘图方式
const ctx = canvas.getContext('2d');

// 定义花瓣的数量
const SAKURA_SUM = 220;
// 花瓣数组
const sakuraArray = [];

// 花瓣图片
const sakuraImg = new Image();
sakuraImg.src = 'https://gitee.com/unfortunately-there-is-no-if/img/raw/master/Image/sakura.png';

/**
 * 定义花瓣类
 */
class Sakura {
    constructor() {
        // 随机生成花瓣的x, y坐标
        this.x = Math.random() * canvas.width;
        this.y = (Math.random() * canvas.height * 2) - canvas.height;
        // 随机生成花瓣的宽高
        this.width = Math.random() * 15 + 30;
        this.height = Math.random() * 12 + 25;
        // 随机透明度
        this.opacity = this.width / 50;
        // 设置一个随机数，后面实现旋转角度效果时会用到
        this.rotate = Math.random();
        // 速度初始化
        this.xSpeed = Math.random() * 1 + 0.2; // 缓慢漂移速度（减小此值可慢慢移动）
        this.ySpeed = Math.random() + 0.5;  // 缓慢下落速度（减小此值可慢慢下落）
        this.rotateSpeed = Math.random() * 0.02;
    }

    // 绘制花瓣
    draw() {
        if (this.x > canvas.width || this.y > canvas.height) {
            this.x = -sakuraImg.width; // 刚好藏住
            this.y = (Math.random() * canvas.height * 2) - canvas.height;
            this.rotate = Math.random();
            this.rotateSpeed = Math.random() * 0.02;
            this.xSpeed = Math.random() * 1 + 0.2;  // 缓慢漂移速度
            this.ySpeed = Math.random() + 0.5;  // 缓慢下落速度
        }

        // 设置花瓣的透明度
        ctx.globalAlpha = this.opacity;

        // 随机旋转花瓣旋转角度
        const cos = Math.cos(this.rotate) * [0.2, 0.6][Math.floor(Math.random() * 2)];
        const sin = Math.sin(this.rotate) * [0.2, 0.6][Math.floor(Math.random() * 2)];

        // 绘制花瓣
        ctx.setTransform(cos, sin, -sin, cos, this.x, this.y);
        ctx.drawImage(
            sakuraImg,
            0,
            0,
            this.width * [0.6, 0.8][Math.floor(Math.random() * 2)],
            this.height * [0.6, 0.8][Math.floor(Math.random() * 2)]
        );
        ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置canvas坐标系为初始状态
    }

    // 更新花瓣的位置并绘制
    animate() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
        this.rotate += this.rotateSpeed;
        this.draw();
    }
}

// 渲染花瓣动画
function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布内容
    sakuraArray.forEach(sakura => sakura.animate()); // 绘制每一片花瓣
    window.requestAnimationFrame(render); // 继续动画
}

// 等花瓣图片加载完毕，初始化花瓣并开始渲染
sakuraImg.onload = () => {
    for (let i = 0; i < SAKURA_SUM; i++) {
        sakuraArray.push(new Sakura());
    }
    render();
};

// 监听浏览器窗口大小变化，重新设置canvas的宽高
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

// 监听鼠标移动事件，使花瓣飘动受鼠标影响
let mouseX = 0;
window.addEventListener('mousemove', (e) => {
    mouseX = (e.clientX || e.touches[0].clientX) / window.innerWidth;
});
window.addEventListener('touchmove', (e) => {
    mouseX = (e.clientX || e.touches[0].clientX) / window.innerWidth;
});
